import React, { useState, useContext, useEffect } from "react";
import {
  Form,
  Row,
  Col,
  Button,
  Input,
  Modal,
  Tabs,
  Radio,
  Card,
  Space,
  Table,
  message
} from "antd";
import { UserContext } from "../store";
import EditableTable from "../EditableTable";
import { getAuthList, editAuth, addAuth } from "../../../api/auth/index";
const { TabPane } = Tabs;
const col = [
  {
    title: "操作类型",
    dataIndex: "action",
    key: "action"
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "描述",
    dataIndex: "describe",
    key: "describe"
  },
  {
    title: "操作",
    key: "op",
    render: (text, record) => (
      <Space size="middle">
        <a>编辑</a>
        <a>删除</a>
      </Space>
    )
  }
];
const Model = (props) => {
  const { store, dispatch } = useContext(UserContext);
  useEffect(() => {}, []);

  const setVisible = (e, type) => {
    if (type === 1 && store.isEdit) {
      changeAuthList(e);
    } else if (!store.isEdit && type === 1) {
      if (store.actionItem.id && store.actionItem.name) {
        addAuth(store.actionItem).then((res) => {
          if (res.code === 0) {
            const arr = [...store.authList];

            dispatch({
              type: "authList",
              authList: arr
            });

            clearAction();

            dispatch({
              type: "finalList",
              finalList: arr
            });

            dispatch({
              type: "visible",
              finalList: false,
              isEdit: true
            });
          }
        });
      } else {
        message.error("完善信息");
        return;
      }
    } else {
      dispatch({
        type: "visible",
        visible: e
      });

      clearAction();
    }
  };

  const clearAction = () => {
    dispatch({
      type: "actionItem",
      actionItem: {
        id: "",
        name: "",
        describe: "",
        status: 1,
        actions: []
      }
    });
  };

  const changeAuthList = (e) => {
    editAuth(store.actionItem.id, store.actionItem).then((res) => {
      if (res.code === 0) {
        message.success(res.msg);
        const copiedAuth = store.authList;
        const target = store.authList.findIndex(
          (c) => c.id === store.actionItem.id
        );

        if (copiedAuth[target]) {
          copiedAuth[target] = store.actionItem;
          console.log(copiedAuth);
          dispatch({
            type: "authList",
            authList: [...copiedAuth]
          });
          dispatch({
            type: "finalList",
            authList: copiedAuth
          });
        }

        dispatch({
          type: "visible",
          visible: e
        });
        clearAction();
      } else {
        message.error(res.msg);
      }
    });
  };

  const onChangeRadio = (e) => {
    const obj = store.actionItem;
    obj.status = e.target.value;
    dispatch({
      type: "actionItem",
      actionItem: obj
    });
  };

  const onChangeId = (e) => {
    const obj = store.actionItem;
    obj.id = e.target.value;
    dispatch({
      type: "actionItem",
      actionItem: obj
    });
  };
  const onChangeName = (e) => {
    const obj = store.actionItem;
    obj.name = e.target.value;
    dispatch({
      type: "actionItem",
      actionItem: obj
    });
  };

  return (
    <Modal
      destroyOnClose={true}
      maskClosable={false}
      mask={true}
      title="新建权限"
      centered
      visible={store.visible}
      onOk={() => setVisible(false, 1)}
      onCancel={() => setVisible(false, 0)}
      width={1000}
    >
      <Tabs defaultActiveKey="1">
        <TabPane tab="基本信息" key="1">
          <Form>
            <Row>
              <Col>
                <Form.Item
                  label="权限标识（ID）"
                  name="id"
                  rules={[
                    {
                      required: true,
                      message: "必填"
                    }
                  ]}
                >
                  <Input
                    onChange={onChangeId}
                    value={store.actionItem.id}
                    defaultValue={store.actionItem.id}
                  ></Input>
                </Form.Item>
              </Col>
              <Col>
                <Form.Item
                  label="权限名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: "必填"
                    }
                  ]}
                >
                  <Input
                    onChange={onChangeName}
                    defaultValue={store.actionItem.name}
                    value={store.actionItem.name}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col>
                <Form.Item
                  label="状态"
                  name="status"
                  rules={[
                    {
                      required: true,
                      message: "必填"
                    }
                  ]}
                >
                  <Radio.Group
                    defaultValue={store.actionItem.status}
                    onChange={onChangeRadio}
                  >
                    <Radio.Button value={1}>启用</Radio.Button>
                    <Radio.Button value={0}>关闭</Radio.Button>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
          </Form>

          <EditableTable />
        </TabPane>
      </Tabs>
    </Modal>
  );
};
export default Model;
